/** @jsxRuntime classic */
/** @jsx jsx */
import { jsx } from '@emotion/react';
import { useState, useEffect, HTMLAttributes } from 'react';

import { Loading } from './Loading';
import { Type } from './Type';

type GitHubButtonProps = {
  repo: string;
} & HTMLAttributes<HTMLElement>;

export function GitHubButton({ repo, ...props }: GitHubButtonProps) {
  const [count, setCount] = useState(0);
  repo = repo.replace('https://github.com/', '');

  useEffect(() => {
    fetch(`https://api.github.com/repos/${repo}`)
      .then(res => res.json())
      .then(({ stargazers_count }) => {
        setCount(stargazers_count);
      })
      .catch(error => {
        console.error('Error retrieving stargazing data', error);
      });
  });

  return (
    <div
      css={{
        display: 'inline-grid',
        gridTemplateColumns: '1fr auto',
        alignItems: 'center',
        border: '1px solid var(--border)',
        borderRadius: '3px',
        verticalAlign: 'middle',
        lineHeight: 0,
      }}
      {...props}
    >
      <a
        aria-label={`Star ${repo} on GitHub`}
        css={{
          color: 'var(--text)',
          verticalAlign: 'middle',
          padding: '0.275rem 0.5rem',
          background: 'var(--code-bg)',
        }}
        href={`https://github.com/${repo}`}
        target="_blank"
        rel="noreferrer"
      >
        <svg
          version="1.1"
          width="16"
          height="16"
          viewBox="0 0 16 16"
          fill="currentColor"
          aria-hidden="true"
          css={{
            verticalAlign: 'middle',
          }}
        >
          <path
            fillRule="evenodd"
            d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"
          />
        </svg>
        <Type
          look="body14bold"
          css={{
            verticalAlign: 'middle',
            margin: 0,
            marginLeft: '0.25rem',
          }}
        >
          Star
        </Type>
      </a>
      <Type
        as="a"
        look="body12"
        href={`https://github.com/${repo}/stargazers`}
        target="_blank"
        rel="noreferrer"
        css={{
          display: 'inline-block',
          borderLeft: '1px solid var(--border)',
          padding: '0.275rem 0.5rem',
          alignSelf: 'stretch',
          lineHeight: 1.3,
        }}
      >
        {count ? count.toLocaleString() : <Loading />}
      </Type>
    </div>
  );
}
